/**Created by liaoyingchao on 2019-08-02.*/

<template>
  <div class="nettest">
    <div class="scroll-div">
      <div class="row" v-for="(item, idx) in messageArr" :key="idx" :class="{red: item.result != '成功'}">
        <div>开始时间：{{item.startTime}}</div>
        <div>完成时间：{{item.endTime}}</div>
        <div>状态：{{item.result}}</div>
        <div>经历时长（单位毫秒）：{{item.duration}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "nettest",
    components: {},
    data() {
      return {
        messageArr: []
      }
    },
    methods: {
      nettest: function () {
        let url = 'http://tbdapp.deepermobile.com/app/json/home/getVueConfig';
        let msg = {
          startTime: new Date()
        }
        this.$http.post(url, {}).then(res => {
          let data = res.data;
          let endTime = new Date();
          if (data.status == 0) {
            msg.result = '成功'
            msg.endTime = endTime
          } else {
            msg.result = '失败'
            msg.endTime = endTime
          }
          let duration = parseInt(new Date(msg.endTime).getTime()) - parseInt(new Date(msg.startTime).getTime())
          msg.duration = duration
          this.messageArr.unshift(msg);
        }, error => {
          let endTime = new Date();
          msg.result = '出错（超时）'
          msg.endTime = endTime
          let duration = parseInt(new Date(msg.endTime).getTime()) - parseInt(new Date(msg.startTime).getTime())
          msg.duration = duration
          this.messageArr.unshift(msg);
        })
      }
    },
    created() {
      this.nettest()
      setInterval(() => {
        this.nettest()
      }, 1000*60*1)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped type="text/stylus">
  .nettest {
    width 100%
    height 100%
    overflow hidden
    .scroll-div {
      height 100%
      overflow-y auto;
      .row {
        padding 10px;
      }
      .red {
        color red;
      }
    }
  }
</style>